<template>

<div id="list">
     <div class="item-list" :class="{showall:true,active:showall}">
      


        <div class="item-pinglun"  v-for="(item,index) in list" @click="comment(item.user_id,item.replayer_nickname)">


        <label class="pingluner">{{item.nickname}}</label><span v-if="item.replayer_nickname? true : false">&nbsp;回复&nbsp;</span>
        <label class="pingluner">{{item.replayer_nickname}}</label>：{{item.content}}

        </div>


    </div>

    <div class="clik" :class="{active:showall}" @click="showall=!showall" v-text="showall==false? up : down" v-if="this.list.length >2 ? true : false"> </div>
      <comms  :id="id" :show="show" :userid="userid" class="coms"></comms>
    </div>
</template>
<script>

import event from '@/pages/Commons/event.js'
import  comms from '@/pages/Commons/Comment.vue'
import axios from 'axios';
export default {

    name: 'AppReplay',
      components: {
        comms
    },

  data() {
    return {
userid:'',
show1:false,
show2:false,
   showall:false,
   down:'全部收起',
   up:'查看更多'
    }
  },

  props:{
    list:'',
    id:'',
    show:false
  },
  methods: {
    comment(userid,replayer_nickname){
      this.show=!this.show
      this.userid=userid
      console.log(this.id)
      if(replayer_nickname){
        this.show1=true,
        this.show2=false
      }
      else{
        this.show1=false,
        this.show2=true
      }



    },

  },
  mounted(){

  }
}
</script>
<style lang="">
.coms{width:100%;margin-left:5% }
.clik{float: right}

.showall{
  height: 2.5rem;
  overflow: hidden;
  clear: both;

}
 .showall.active{
         height: auto;
 }

.item-list{padding: 0 0.5rem;position:relative;}
.top-icon{
    top: -1.8rem;
    position: absolute;
    color: #eeeeee;
    font-size: 1.5rem;
}
.item-pinglun{color: #A3A3A3; font-size: .9rem;
word-wrap: break-word;
word-break: normal;

}
.pingluner{color: #259E7B;}
</style>
